<template>
  <div class="content" :class="{ 'is-mobile': isMobile }" v-loading="submitting">
    <heads :current="1"></heads>
    <div class="main" v-show="!showPassengerForm">
      <div class="order-container">
        <!-- Product Details Section -->
        <div class="product-section">
          <h1 class="product-title">{{ product.name }}</h1>
          <div class="product-gallery">
            <el-carousel :height="isMobile ? '250px' : '400px'" :autoplay="false" :loop="false">
              <el-carousel-item v-for="(image, index) in product.imageList" :key="index">
                <el-image fit="contain" :preview-src-list="product.imageList" :src="image" :alt="product.name" class="carousel-image" />
              </el-carousel-item>
            </el-carousel>
<!--            <div class="thumbnail-row" v-if="!isMobile">-->
<!--              <div v-for="(image, index) in product.imageList"-->
<!--                   :key="index"-->
<!--                   class="thumbnail"-->
<!--                   @click="currentIndex = index">-->
<!--                <img :src="image" :alt="product.name">-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <div class="product-info">
            <div class="price" style="color: #0F7CD0;font-weight: bold">{{ $t('order.price') }}：${{ product.price }}</div>
            <div class="details">
              <div class="detail-item">
                <span class="label">{{ $t('order.location') }}:</span>
                <span>{{ product.location }}</span>
              </div>
              <div class="detail-item">
                <span class="label">{{ $t('order.productCode') }}:</span>
                <span>{{ product.code }}</span>
              </div>
            </div>
            <div v-html="product.content"></div>
          </div>
        </div>

        <!-- Booking Form Section -->
        <div class="booking-section">
          <div class="booking-form">
            <h2 class="form-title">{{ $t('order.startBooking') }}</h2>
            <!-- Date Selection -->
            <div class="date-section">
              <h3>{{ $t('order.selectDate')}} <span class="required">*</span></h3>
              <el-calendar v-model="selectedDate" @change="onCalendarChange">
                <template #dateCell="{ data }">
                  <div
                    class="calendar-cell"
                    :class="{
                      'is-selected': isSelected(data.day),
                      'is-disabled': isDateDisabled(data.day)
                    }"
                    @click.stop="handleDateClick(data.day)"
                  >
                    {{ data.day.split('-').slice(-1)[0] }}
                  </div>
                </template>
              </el-calendar>
            </div>

            <!-- Time Selection -->
            <div class="time-section">
              <h3>{{ $t('order.selectTime')}}（{{ $t('order.minCount')}}{{ minHours }}H） <span class="required">*</span></h3>
              <div class="time-grid-container">
                <div v-if="availableHours.length" class="time-grid">
                  <div
                    v-for="hour in availableHours"
                    :key="hour"
                    class="time-cell"
                    :class="{
                      'booked': isTimeBooked(hour),
                      'selected': isTimeSelected(hour),
                      'in-range': isInTimeRange(hour)
                    }"
                    @click="handleTimeClick(hour)"
                  >
                    <div class="time">{{ formatHour(hour) }}</div>
                    <div class="status">
                      <span v-if="isTimeBooked(hour)">{{ $t("order.isBooked") }}</span>
                      <span v-else-if="hour === startHour">{{ $t('order.start') }}</span>
                      <span v-else-if="hour === endHour">{{ $t('order.end') }}</span>
                      <span v-else-if="isInTimeRange(hour)">{{ $t('order.selected') }}</span>
                      <span v-else>{{ $t('order.available') }}</span>
                    </div>
                  </div>
                </div>
                <div v-else class="empty-state">
                  {{ $t('order.noAvailableTime') }}
                </div>
              </div>
              <div class="selected-time-range" v-if="startHour !== null">
                {{ $t('order.selectedTimeRange') }}: {{ formatHour(startHour) }} - {{ endHour !== null ? formatHour(endHour) : $t('order.selectEndTime') }}
              </div>
            </div>

            <!-- Total Price -->
            <div class="total-price" v-if="startHour !== null && endHour !== null && totalPrice > 0">
              <span>{{ $t('order.price') }}</span>
              <span class="amount">
                <template v-if="$store.state.userInfo">
                  <span class="original-price">${{ totalPrice }}</span>
                  <span class="discount">-20%</span>
                  <span class="discount-price">${{ (totalPrice * 0.8).toFixed(2) }}</span>
                </template>
                <template v-else>
                  ${{ totalPrice }}
                </template>
                （{{ duration }}h）
              </span>
            </div>
            <!-- Submit Button -->
            <div class="submit-section" v-if="!showPassengerForm">
              <el-button
                type="primary"
                class="submit-btn"
                :loading="submitting"
                :disabled="!isTimeRangeSelected"
                @click="confirmBooking"
              >
                {{ $t('order.confirmBooking') }}
              </el-button>
            </div>

            <!-- Passenger Information Form -->
            <div v-if="showPassengerForm" class="passenger-form">
              <h3>{{ $t('order.contactInfo') }}</h3>
              <div class="contact-form">
                <el-form :model="contactPerson" :rules="contactRules" ref="contactForm">
                  <el-form-item prop="name" :label="$t('order.name')" required>
                    <el-input v-model="contactPerson.name" :placeholder="$t('order.namePlaceholder')"></el-input>
                  </el-form-item>

                  <el-form-item prop="phone" :label="$t('order.phone')" required>
                    <el-input v-model="contactPerson.phone" :placeholder="$t('order.phonePlaceholder')"></el-input>
                  </el-form-item>

                  <el-form-item prop="email" :label="$t('order.email')" required>
                    <el-input v-model="contactPerson.email" :placeholder="$t('order.emailPlaceholder')"></el-input>
                  </el-form-item>

                  <el-form-item prop="wechat" :label="$t('order.wechat')">
                    <el-input v-model="contactPerson.wechat" :placeholder="$t('order.wechatPlaceholder')"></el-input>
                  </el-form-item>
                  <el-form-item prop="notes" :label="$t('order.notes')">
                      <el-input
                        type="textarea"
                        v-model="contactPerson.notes"
                        :placeholder="$t('order.notesPlaceholder')"
                        :rows="2">
                      </el-input>
                  </el-form-item>
                </el-form>
              </div>

              <!-- Payment Button -->
              <el-button
                type="primary"
                class="payment-btn"
                @click="proceedToPayment"
                :loading="submitting">
                {{ $t('order.proceedToPayment') }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Team
        :passengerForms="passengerForms"
        :ship="product"
        v-show="showPassengerForm"
        @proceedToPayment="proceedToPayment"
        @back="showPassengerForm = false"></Team>
    <foot></foot>
  </div>
</template>

<script>
import { http } from '@/api/api.js'
import dayjs from "dayjs";
import Team from "@/pages/team.vue";

export default {
  name: 'order',
  components: {Team},
  data() {
    return {
      cycle_id: '',
      isMobile: false,
      product: {
        imageList: []
      },
      passengerTypes: [],
      selectedDate: dayjs().add(1, 'day').toDate(),
      startHour: null,
      endHour: null,
      submitting: false,
      currentIndex: 0,
      availableHours: [],
      bookedHours: [],
      showPassengerForm: false,
      passengerForms: [
        {
          nickname: ''
        }
      ],
      contactPerson: {
        name: '',
        phone: '',
        email: '',
        wechat: '',
        notes: ''
      },
      contactRules: {
        name: [
          { required: true, message: this.$t('order.nameRequired'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('order.phoneRequired'), trigger: 'blur' },
          { pattern: /^[0-9\-+]{8,}$/, message: this.$t('order.phoneInvalid'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('order.emailRequired'), trigger: 'blur' },
          { type: 'email', message: this.$t('order.emailInvalid'), trigger: 'blur' }
        ]
      },
      passengerRules: {
        name: [
          { required: true, message: this.$t('order.nameRequired'), trigger: 'blur' }
        ],
        phone: [
          { required: true, message: this.$t('order.phoneRequired'), trigger: 'blur' },
          { pattern: /^[0-9\-+]{8,}$/, message: this.$t('order.phoneInvalid'), trigger: 'blur' }
        ],
        email: [
          { required: true, message: this.$t('order.emailRequired'), trigger: 'blur' },
          { type: 'email', message: this.$t('order.emailInvalid'), trigger: 'blur' }
        ]
      },
      shipInfo: null,
      minHours: 0
    }
  },
  computed: {
    isTimeRangeSelected() {
      return this.startHour !== null && this.endHour !== null;
    },
    duration() {
      if (this.startHour === null || this.endHour === null) return 0;
      return (this.endHour - this.startHour);
    },
    totalPrice() {
      // 包含起始和结束小时，所以需要+1
      return this.duration * this.product.price;
    }
  },
  watch: {
    selectedDate: {
      handler(val, oldVal) {
        // 只在通过日历组件直接改变时不触发，因为日历的@change事件会处理
        if (!this.isCalendarChange) {
          this.handleDateChange(val)
        }
        this.isCalendarChange = false
      }
    },
    startHour: {
      handler() {
        this.resetPassengerForm()
      }
    },
    endHour: {
      handler() {
        this.resetPassengerForm()
      }
    },
  },
  methods: {
    resetPassengerForm() {
      this.showPassengerForm = false
      this.passengerForms = [
        {
          nickname: ''
        }
      ]
      this.contactPerson = {
        name: '',
        phone: '',
        email: '',
        wechat: '',
        notes: ''
      }
    },

    updatePassengerForms() {
      // Create a new array to store updated passenger forms
      const newPassengerForms = []
      let totalIndex = 0

      // Iterate through passenger types
      this.passengerTypes.forEach(type => {
        for (let i = 0; i < type.count; i++) {
          // Find existing passenger form for this type and index
          const existingForm = this.passengerForms.find(form =>
            form.type === type.label &&
            form.typeIndex === i
          )

          if (existingForm) {
            // Keep existing data if form already exists
            newPassengerForms.push({
              ...existingForm,
              formIndex: totalIndex // Update form index for ref
            })
          } else {
            // Create new form if doesn't exist
            newPassengerForms.push({
              type: type.label,
              typeIndex: i,
              formIndex: totalIndex,
              name: '',
              phone: '',
              email: '',
              notes: ''
            })
          }
          totalIndex++
        }
      })

      // Update forms array
      this.passengerForms = newPassengerForms

      // Force re-render of forms
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },

    confirmBooking() {
      if (!this.validateForm()) return
      this.showPassengerForm = true
    },

    changeDay(date) {
      // 重置时间选择和价格
      this.startHour = null;
      this.endHour = null;

      this.bookedHours = [];
      http.shipCycle.list({
        ship_id: this.$route.query.id,
        start_time: date
      }).then(res => {
        let list = res.data.filter(item => {
          return item.orderList && item.orderList.length && item.orderList.filter(order => order.status === 0 || order.status === 1).length
        })
        const { start_time, end_time, min_duration } = this.product
        if (start_time && end_time) {
          this.businessStartHour = parseInt(start_time);
          this.businessEndHour = parseInt(end_time);
          this.minHours = min_duration || 1;
          this.updateAvailableHours();
        }
        // 根据数据列表中的开始时间以及时长，计算结束时间，将当天可选的时间段进行标记
        for (let i = 0; i < list.length; i++) {
          let item = list[i];
          let startTime = dayjs(item.start_time);
          let endTime = startTime.add(item.duration, 'hour');

          // Convert to decimal hours for comparison
          let startDecimal = startTime.hour() + startTime.minute() / 60;
          let endDecimal = endTime.hour() + endTime.minute() / 60;

          // Check every half hour between start and end
          for (let time = startDecimal; time <= endDecimal; time += 0.5) {
            this.bookedHours.push(time);
          }
        }
      });
    },
    formatHour(hour) {
      const hours = Math.floor(hour);
      const minutes = (hour % 1) * 60;
      return `${String(hours).padStart(2, '0')}:${minutes === 0 ? '00' : '30'}`;
    },

    isTimeBooked(hour) {
      return this.bookedHours.includes(hour);
    },

    isTimeSelected(hour) {
      return hour === this.startHour || hour === this.endHour;
    },

    isInTimeRange(hour) {
      if (this.startHour === null || this.endHour === null) return false;
      return hour > this.startHour && hour < this.endHour;
    },

    handleTimeClick(hour) {
      if (this.isTimeBooked(hour)) {
        return;
      }
      if (this.startHour === hour) {
        this.startHour = null;
        this.endHour = null;
        return;
      }
      if (!this.startHour || hour <= this.startHour) {
        this.startHour = hour;
        this.endHour = null;
      } else {
        // Check if selection meets minimum hours requirement
        if (this.minHours && (hour - this.startHour) < this.minHours) {
          this.$message.warning(`${this.minHours}${this.$t('order.minHours')}`);
          return;
        }

        // Check if any hour in between is booked
        for (let h = this.startHour + 0.5; h < hour; h += 0.5) {
          if (this.isTimeBooked(h)) {
            this.$message.warning(this.$t('order.timeRangeError'));
            // Reset to start time
            this.startHour = hour;
            this.endHour = null;
            return;
          }
        }
        this.endHour = hour;
      }
    },

    updateAvailableHours(isToday = false) {
      if (!this.businessStartHour || !this.businessEndHour) return;

      let startHour = this.businessStartHour;

      // 只在当天才考虑当前时间
      if (isToday) {
        const now = new Date();
        const currentHour = now.getHours() + now.getMinutes() / 60;
        startHour = Math.max(this.businessStartHour, Math.ceil((currentHour + 1) * 2) / 2);
      }

      if (startHour <= this.businessEndHour) {
        this.availableHours = [];
        for (let time = startHour; time <= this.businessEndHour; time += 0.5) {
          this.availableHours.push(time);
        }
      } else {
        this.availableHours = [];
      }
    },

    handleTimeChange() {
      if (this.startHour === null || this.endHour === null) return;
    },

    checkDevice() {
      this.isMobile = window.innerWidth <= 750
    },
    isSelected(date) {
      return dayjs(date).format('YYYY-MM-DD') === dayjs(this.selectedDate).format('YYYY-MM-DD');
    },

    isDateDisabled(date) {
      return dayjs(date).isSame(dayjs(), 'day') || dayjs(date).isBefore(dayjs(), 'day');
    },

    handleDateClick(date) {
      if (this.isDateDisabled(date)) {
        // this.$message.warning('不能选择当天及以前的日期');
        return;
      }
      this.selectedDate = dayjs(date).toDate();
      this.changeDay(date);
    },

    handleDateChange(date) {
      // 处理日期变化的逻辑
      // this.resetTimeSelection()
      // this.getAvailableTimes(dayjs(date).format('YYYY-MM-DD'))
    },
    onCalendarChange(date) {
      this.isCalendarChange = true
      this.selectedDate = date
      this.handleDateChange(date)
    },
    async proceedToPayment({ contactPerson }) {
      this.contactPerson = {
        ...contactPerson
      }
      // try {
      //   await this.$refs.contactForm.validate()
      // } catch (error) {
      //   return
      // }
      this.submitting = true
      console.log(this.cycle_id)
      if (!this.cycle_id) {
        try {
          const res = await http.shipCycle.createCustom( {
            // 创建排期
            ship_id: this.$route.query.id,
            start_time: dayjs(this.selectedDate).format('YYYY-MM-DD') + ' ' + this.formatHour(this.startHour),
            end_time: dayjs(this.selectedDate).format('YYYY-MM-DD') + ' ' + this.formatHour(this.endHour),
            price: this.product.price,
            child_price: this.product.child_price,
            duration: this.duration,
            count: this.product.count
          })
          this.cycle_id = res.data.id
          try {
            const orderData = {
              ship_id: this.$route.query.id,
              cycle_id: this.cycle_id,
              contact_name: this.contactPerson.name,
              contact_phone: this.contactPerson.phone,
              contact_email: this.contactPerson.email,
              contact_wx: this.contactPerson.wechat,
              contact_remark: this.contactPerson.notes,
              ...this.contactPerson,
              totalPrice: this.totalPrice,
              amount: this.$store.state.userInfo ? this.totalPrice * 0.8 : this.totalPrice,
              discount_amount: this.$store.state.userInfo ? this.totalPrice * 0.2 : 0,
              userList: this.passengerForms,
              count: this.product.count
            }
            const response = await http.order.create('', {
              ...orderData,
              user_id: this.$store.state.userInfo ? this.$store.state.userInfo.id : 0,
              role: this.$store.state.userInfo ? 2 : 1,
            })
            this.$router.push({
              path: '/payment',
              query: { orderId: response.data.id }
            })
          } catch (error) {
            this.submitting = false
          } finally {
            this.submitting = false
          }
        }
        catch (e) {
          console.log(e)
          this.submitting = false
        }
      }
    },
    validateForm() {
      if (!this.startHour || !this.endHour) {
        this.$message.warning(this.$t('order.timeRangeRequired'));
        return false;
      }
      // Duration includes start and end hours
      const duration = this.endHour - this.startHour;
      if (this.minHours && duration < this.minHours) {
        this.$message.warning(`${this.minHours}${this.$t('order.minHours')}`);
        return false;
      }
      return true;
    },
  },
  async created() {
    try {
      const { data: product } = await http.ship.read(this.$route.query.id)
      this.product = {
        ...product,
        imageList: (product.images || '').split(',')
      }

      if (product.price) {
        this.passengerTypes.push({
          id: 1,
          label: this.$t('order.adult'),
          price: product.price,
          count: product.min_count,
          min: product.min_count || 0,
          max: product.count,
          is_adult: true
        })
      }

      if (product.child_price) {
        this.passengerTypes.push({
          id: 2,
          label: this.$t('order.child'),
          price: product.child_price,
          count: product.min_count,
          min: product.min_count || 0,
          max: product.count,
          is_adult: false
        })
      }

      await this.changeDay(dayjs(this.selectedDate).format('YYYY-MM-DD'))
    } catch (error) {
      console.error('Error fetching product:', error)
      this.$message.error(this.$t('order.productError'))
    }
  },
  mounted() {
    this.checkDevice()
    window.addEventListener('resize', this.checkDevice)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDevice)
  }
}
</script>

<style lang="less" scoped>
.content {
  .main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;

    @media screen and (max-width: 750px) {
      padding: 10px;
    }
  }
}

.order-container {
  display: flex;
  gap: 30px;
  @media screen and (max-width: 750px) {
    flex-direction: column;
    gap: 20px;
  }
}

.product-section {
  flex: 1;

  .product-title {
    font-size: 24px;
    margin-bottom: 20px;

    @media screen and (max-width: 750px) {
      font-size: 20px;
      margin-bottom: 15px;
    }
  }

  .product-gallery {
    margin-bottom: 20px;

    .carousel-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .thumbnail-row {
      display: flex;
      gap: 10px;
      margin-top: 10px;
      overflow-x: auto;
      padding-bottom: 5px;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 2px;
      }

      .thumbnail {
        flex-shrink: 0;
        width: 80px;
        height: 60px;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.3s;

        &:hover {
          opacity: 1;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .product-info {
    .price {
      font-size: 20px;
      color: #333;
      margin-bottom: 15px;

      @media screen and (max-width: 750px) {
        font-size: 18px;
        margin-bottom: 10px;
      }
    }

    .details {
      .detail-item {
        margin-bottom: 10px;

        .label {
          color: #666;
          margin-right: 10px;
        }
      }
    }
  }
}

.el-calendar__header {
  padding: 12px 0 !important;
}
.booking-section {
  width: 100%;
  max-width: 440px;

  @media screen and (max-width: 750px) {
    max-width: none;
  }

  .booking-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    @media screen and (max-width: 750px) {
      padding: 15px;
      border-radius: 0;
      box-shadow: none;
      background: #f8f8f8;
    }

    .form-title {
      font-size: 20px;
      margin-bottom: 20px;
      text-align: center;

      @media screen and (max-width: 750px) {
        font-size: 18px;
        margin-bottom: 15px;
      }
    }

    .required {
      color: #ff4949;
    }

    h3 {
      margin-bottom: 15px;
      font-size: 16px;
    }
  }

  .passenger-section {
    margin-bottom: 20px;

    .passenger-type {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .type-label {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin-right: 15px;

        .price {
          color: #666;
        }
      }

      .count-select {
        width: 100px;
      }
    }
  }

  .date-section {
    margin-bottom: 20px;

    :deep(.el-calendar) {
      --el-calendar-selected-bg-color: #0F7CD0;
      --el-calendar-selected-color: #fff;
      .el-calendar__body {
        .el-calendar-day {
          padding: 0 !important;
          height: 36px;
        }

        td {
          border: none;
        }
      }

      .el-calendar-table {
        tr {
          td {
            &:first-child {
              border-left: none;
            }
            &:last-child {
              border-right: none;
            }
          }
        }
      }
    }

    .calendar-cell {
      height: 36px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: all 0.3s ease;

      &.is-selected {
        background-color: #0F7CD0;
        color: #fff;
      }

      &:hover:not(.is-disabled) {
        background-color: #0F7CD0;
        color: #fff;
      }

      &.is-disabled {
        color: #ccc;
        cursor: not-allowed;
        background-color: #f5f5f5;
        &:hover {
          background-color: transparent;
          color: #ccc;
        }
      }
    }
  }

  .time-section {
    margin-bottom: 20px;

    .time-grid-container {
      margin-top: 15px;
      padding: 12px;
      background-color: #fff;
    }

    .time-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 10px;
    }

    .time-cell {
      background-color: #f8f8f8;
      padding: 10px;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.3s ease;

      &.booked {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;

        .status {
          color: #999;
        }
      }

      &.selected {
        background-color: #0F7CD0;
        color: #fff;

        .status {
          color: #fff;
        }
      }

      &.in-range {
        background-color: rgba(15, 124, 208, 0.1);
      }

      .time {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 4px;
      }

      .status {
        font-size: 12px;
        color: #666;
      }

      &:hover:not(.booked) {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .empty-state {
      text-align: center;
      padding: 20px;
      background-color: #f8f8f8;
      border-radius: 8px;
      color: #666;
    }

    .selected-time-range {
      margin-top: 15px;
      padding: 10px;
      background-color: #f8f8f8;
      border-radius: 8px;
      text-align: center;
      font-weight: bold;
      color: #0F7CD0;
    }
  }
  .total-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    .amount {
      font-size: 20px;
      font-weight: bold;
      color: #333;

      .original-price {
        text-decoration: line-through;
        color: #999;
        font-size: 14px;
        margin-right: 5px;
      }
      .discount {
        color: #ff4949;
        font-size: 12px;
        margin-right: 5px;
        background: rgba(255,73,73,0.1);
        padding: 2px 4px;
        border-radius: 2px;
      }
      .discount-price {
        color: #ff4949;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }

  .submit-section {
    margin-top: 20px;
    text-align: center;

    .submit-btn {
      width: 100%;
      height: 44px;
      font-size: 16px;
      background-color: #0F7CD0;
      border-color: #0F7CD0;

      &:not(:disabled):hover {
        background-color: #1989fa;
        border-color: #1989fa;
      }

      &:disabled {
        background-color: #a0cfff;
        border-color: #a0cfff;
        cursor: not-allowed;
      }
    }
  }

  .passenger-form {
    margin-top: 30px;

    h3 {
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;

      &:not(:first-child) {
        margin-top: 40px;
      }
    }

    .contact-form {
      background: #f8f8f8;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;

      :deep(.el-form-item) {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        .el-form-item__label {
          color: #666;
        }

        .el-input__inner {
          border-color: #dcdfe6;
        }
      }
    }

    .passenger-info {
      margin-bottom: 30px;
      padding: 20px;
      background: #f8f8f8;
      border-radius: 8px;

      .passenger-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h4 {
          font-size: 16px;
          color: #333;
        }

        .required {
          font-size: 12px;
          color: #f56c6c;
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 20px;

        .el-form-item__label {
          color: #666;
        }

        .el-input__inner {
          border-color: #dcdfe6;
        }
      }
    }

    .payment-btn {
      width: 100%;
      height: 44px;
      margin-top: 20px;
      background-color: #0F7CD0;
      border-color: #0F7CD0;

      &:hover {
        background-color: darken(#0F7CD0, 5%);
        border-color: darken(#0F7CD0, 5%);
      }
    }
  }

  .is-mobile {
    .contact-form {
      padding: 15px;
    }
    .passenger-info {
      padding: 15px;
    }
  }
}
</style>

<style>
.el-calendar-table .el-calendar-day {
  padding: 0 !important;
}
.el-calendar__body {
  padding: 0 !important;
}
</style>
